<template>
  <div class="home">
    <main>
      <router-view></router-view>
    </main>
    <footer>
      <van-tabbar @change="changeTab" v-model="active">
        <!-- 通过name匹配 -->
        <van-tabbar-item v-for="(item, index) in list" :name="item.path" :icon="item.icon" :key="index" :badge="item.flag && allCount > 0? allCount: ''">
          {{ item.title }}
        </van-tabbar-item>
        <!-- 通过下标匹配 -->
        <!-- <van-tabbar-item icon="search">分类</van-tabbar-item>
        <van-tabbar-item icon="friends-o" badge="5">购物车</van-tabbar-item> -->
      </van-tabbar>
    </footer>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: "Home",
  data() {
    return {
      active: this.$route.path.split('/')[2],
      list: [
        {
          path: "classify",
          title: "分类",
          icon: "search",
          flag: false
        },
        {
          path: "car",
          title: "购物车",
          icon: "friends-o",
          flag: true
        }
      ]
    }
  },
  computed: {
    ...mapGetters({
      allCount: "Car/allCount"
    })
  },
  created() {

  },
  methods: {
    changeTab(active) {
      this.$router.push('/home/' + active)
    }
  }
};
</script>
